<template>
  <div class="home">
    <!-- 顶部搜索栏 -->
    <van-search
      shape="round"
      background="#d81e06"
      placeholder="请输入搜索关键词"
      @click-input="handleJumpToSearch"
      show-action

      
    >
      <template #left>
        <van-icon name="apps-o" size="24" color="#FFFFFF" />
      </template>
      <template #action>
        <van-icon name="manager-o" size="24" color="#FFFFFF" @click="goToLogin" />
      </template>
    </van-search>
    <!-- 使用 Sweiper 库 -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="image in images" :key="image.id">
          <img :src="image.image" style="width: 100%; height: 100%" />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>

    <!-- 宫格渲染 -->
    <van-grid :column-num="5" :border="false">
      <van-grid-item
        v-for="grid in grids"
        :key="grid.text"
        :icon="grid.icon"
        :text="grid.text"
      />
    </van-grid>
    <!-- 秒杀商品 -->
    <div class="skill">
      <span>商品秒杀</span>
      <van-count-down :time="time">
        <template #default="timeData">
          <span class="block">{{ timeData.hours }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.minutes }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.seconds }}</span>
        </template>
      </van-count-down>
    </div>
    <!--  <van-grid :column-num="4" :border="false" icon-size="64">
      <van-grid-item
        v-for="skill in skills"
        :key="skill.id"
        :icon="skill.image"
        :text="skill.originprice"
      />
    </van-grid> -->
    <div class="swiper-container skill-list">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="skill in skills" :key="skill.id">
          <img :src="skill.image" />
          <span class="price">￥{{ money(skill.price) }}</span>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
  </div>
  <!-- 推荐商品 -->
  <van-divider
    :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    >推荐商品</van-divider
  >
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
  >
    <div class="recommend-list">
      <div class="recommend-list-item" v-for="prod in recommeds" :key="prod.id" @click="goToDetail(prod.id)">
        <img :src="prod.image" alt="" />
        <div class="title van-ellipsis">{{ prod.title }}</div>
        <div class="price van-ellipsis">
          <span class="price-txt">￥{{ money(prod.price) }}</span>
          <span class="origin-price">原价: {{ money(prod.originPrice) }}</span>
        </div>
        <div class="sales">销量: {{ prod.saleNum }}</div>
      </div>
    </div>
  </van-list>

  <!-- <div v-for="item in recommeds">
<img :src="item.image" alt="">
  {{ item.title }}

</div> -->
  <!-- 回到顶部 -->
  <van-back-top bottom="60px" :offset="200" style="background-color: brown" />
</template>

<script setup lang="ts">
import { ref, nextTick } from "vue";
import { useRouter } from "vue-router";
import { getBanners, getSecKillList, getRecommed } from "@/api/home";
//@ts-ignore

import Swiper from "swiper/swiper-bundle";

import "swiper/swiper-bundle.css";

const router = useRouter();
const handleJumpToSearch = () => {
  router.push("/search");
};
const images = ref<Banner[]>([]);
const fetchData = async () => {
  try {
    const result = await getBanners();
    console.log("轮播图数据:", result);
    images.value = result.data.data.banners;
    // 下一次 DOM 更新后，渲染轮播图
    nextTick(() => {
      new Swiper(".swiper-container", {
        autoplay: true, // 自动轮播
        loop: true, // 循环模式选项

        effect: "fade",

        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
          bulletActiveClass: "bullet-active",
        },
      });
    });
  } catch (error) {
    console.error("异常:", error);
  }
};
fetchData();
function getImageUrl(name: number | string) {
  return new URL(`../../assets/${name}.png`, import.meta.url).href;
}
const grids = ref([
  { icon: getImageUrl(1), text: "天天超市" },
  { icon: getImageUrl(2), text: "天天数码" },
  { icon: getImageUrl(3), text: "服饰美妆" },
  { icon: getImageUrl(4), text: "充值中心" },
  { icon: getImageUrl(5), text: "PLUS会员" },
]);
const time = ref(30 * 60 * 60 * 1000);
//查询秒杀商品

const skills = ref<Product[]>([]);
const fetchSKill = async () => {
  try {
    const resultKill = await getSecKillList();
    console.log("秒杀商品:", resultKill);
    skills.value = resultKill.data.data.list;
    nextTick(() => {
      new Swiper(".skill-list", {
        slidesPerView: 3,
      });
    });
  } catch (error) {
    console.error("异常:", error);
  }
};
fetchSKill();
// 格式化金额
const money = (val: number | string) => {
  return Number(val).toFixed(2);
};
//推荐商品
const recommeds = ref<Product[]>([]);
const loading = ref<boolean>(false);
const finished = ref<boolean>(false);
const getRecommedList = async () => {
  try {
    const resultRecommed = await getRecommed();
    console.log(resultRecommed);
    recommeds.value = resultRecommed.data.data.list;
  } catch (error) {
    console.log("异常", error);
  }
};
getRecommedList();
//加载更多数据
/* const handleLoadMore=async()=>{
  try{
    const more=await getMoreList()

  }catch(error){
    console.error('异常：',error)

  }

} */
//跳转到详情页面
const goToDetail=(id:any)=>{
router.push(
  {
    path:'/detail',
    query:{
      id,
    }
  }
)

}
//跳转到登录界面
const goToLogin=()=>{
  router.push('/login')

}

</script>

<style lang="less" scoped>
.bullet-active {
  background: #d81e06;
  opacity: 1;
}
</style>

<style lang="less" scoped>
.van-icon-apps-o {
  margin-right: 6px;
}

.swiper-container {
  width: 100%;
  height: 180px;
}

.skill {
  display: flex;
  align-items: center;
  padding: 6px;
}
.skill-list .swiper-wrapper img {
  width: 80px;
  height: 80px;
}

.colon {
  display: inline-block;
  margin: 0 4px;
  color: #d81e06;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #d81e06;
}
.recommend-list img {
  width: 80px;
  height: 80px;
}
</style>
